<!doctype html>
<html>
    <head>
        <script src="./canvas-datagrid.debug.js"></script>
        <meta name="viewport" content="width=device-width">
        <style>
            html, body {
                height: 100%;
                min-height: 100%;
                margin: 0;
                padding: 0;
                overflow: hidden;
            }
            .grid {
                --cdg-height: 50%;
                --cdg-cell-color: red;
                --cdg-cell-background-color: lightyellow;
                --cdg-active-cell-background-color: burlywood;
                --cdg-grid-background-color: lightblue;
            }
        </style>
    </head>
    <body>
        <canvas-datagrid class="grid" selectionmode="row" style="--cdg-cell-color: darkblue;">[
            {"col1": "row 1 column 1", "col2": "row 1 column 2", "col3": "row 1 column 3"},
            {"col1": "row 2 column 1", "col2": "row 2 column 2", "col3": "row 2 column 3"}
        ]</canvas-datagrid>
    </body>
</html>
